<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <title>Liquor Tree: Checkboxes</title>
    <link rel="stylesheet" href="../assets/style.css">
    <script src="../assets/menu.js"></script>

    <!-- first import Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="/liquor-tree.umd.js"></script>

  </head>
  <body>
    <div class="hello">
      Checkboxes.
    </div>
    <div id="app">
      <div class="examples">
        <div class="example">
          <div class="example-description">You can navigate using keyboard and check/uncheck node using either Space or Enter key</div>
          <div class="example-tree">
              <tree
                :data="treeData0"
                :options="treeOptions0" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">
            <p>Using <b>v-model</b>. We have some differences in checkbox mode. Note that <b>multiple</b> is false. If <b>multiple</b> is true the selected object will be an array.</p>
            <p v-if="treeModel && treeModel.selected">
              <b>Selected: </b>  {{ treeModel.selected.text }}
            </p>

            <p v-if="treeModel">
              <b>Checked: </b>  {{ treeModel.checked.map(el => getFullPath(el)) }}
            </p>
          </div>
          <div class="example-tree">
              <tree
                :data="treeData1"
                :options="treeOptions1"
                ref="tree1"
                v-model="treeModel" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">Test <b>autoCheckChildren</b> option</div>
          <div class="example-tree">
              <tree
                :data="treeData2"
                :options="treeOptions2" />
          </div>
        </div>

        <div class="example">
          <div class="example-description">Test <b>checkOnSelect</b> option</div>
          <div class="example-tree">
              <tree
                :data="treeData2"
                :options="treeOptions3" />
          </div>
        </div>
      </div>
    </div>

    <script>
      new Vue({
        el: '#app',
        data: () => ({
          treeData0: getTreeData(),
          treeOptions0: {
            checkbox: true
          },

          treeModel: null,
          treeData1: getTreeData(false),
          treeOptions1: {
            checkbox: true,
            multiple: false,
            checkDisabledChildren: false
          },

          treeData2: getTreeData(),
          treeOptions2: {
            checkbox: true,
            autoCheckChildren: false
          },

          treeOptions3: {
            checkbox: true,
            checkOnSelect: true
          },
        }),

        methods: {
          getFullPath(node) {
            const fullPath = [node.text]

            node.recurseUp(parentEl => fullPath.unshift(parentEl.text))

            return fullPath.join('->')
          }
        },

        mounted() {
          const tree1 = this.$refs.tree1

          this.treeModel = {
            selected: tree1.selected(),
            checked: tree1.checked()
          }
        }
      })

      function getTreeData(checked = true) {
        return [
            {
                text: 'Item 1',
                id: 1,
                data: {
                  c: 10
                }
            },

            {
                text: 'Item 2',
                id: 2,
                state: {
                  expanded: true
                },
                children: [
                    {text: '<b>Item (2.1)</b>', state: {checked: checked}},
                    {text: 'Item 2.2$$$'},
                    {
                        text: 'Item 2.3',
                        children: [
                            {text: 'Item 2.2.3.1'},
                            {text: 'Item 2.2.3.2'},
                            {text: 'Item 2.2.3.3'},
                            {text: 'Item 2.2.3.4', children: [
                                {text: 'Item 2.2.3.4.1'},
                                {text: 'Item 2.2.3.4.2'}
                            ]}
                        ]
                    },
                    {text: 'Item 2.4'}
                ]
            },

            {
                text: 'Item 3',
                id: 1111111111,
                state: { checked: checked }
            },

            {
                text: 'Item 4',
                state: { disabled: true }
            },

            {
                text: 'Item 5',
                state: {
                    opened: true
                },
                children: [
                    {text: 'Item 5.1'},
                    {text: 'Item 5.2'},
                    {text: 'Item 5.3'},
                    {text: 'Item 5.4', state: {disabled: true}}
                ],
                id: 5
            }
        ]
      }
    </script>

  </body>
</html>
